<!DOCTYPE html>
<html>
<head>
    <title>我第一个3D</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/three.min.js"></script>
    <style>
        body{
            /* 设置margin：0和overflow:hidden，使用完整的页面 */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="WebGL-output"></div>
    <script type="text/javascript">
        $(function(){
            //场景：一个容器，用来保存并跟踪所有我们想渲染的物体
            var scene = new THREE.Scene();
            //相机：定义我们能够在渲染好的scene里看到什么
            var camera = new THREE.PerspectiveCamera(45,
                            window.innerWidth/window.innerHeight,
                            0.1,1000);
            //渲染器：负责就算指定相机角度下，浏览器中的scene的样子
            var renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(0xEEEEEE);
            renderer.setSize(window.innerWidth,window.innerHeight);
            var axes = new THREE.AxisHelper(10);//长度
            scene.add(axes);
            //平面：plane为平面、cube为长方体、sphere为球
            var planeGeometry = new THREE.PlaneGeometry(60,20);//宽，高
            var planeMaterial = new THREE.MeshBasicMaterial({color:0xcccccc});
            var plane = new THREE.Mesh(planeGeometry,planeMaterial);
            plane.rotation.x = -0.5*Math.PI;//旋转平面，将垂直的平面旋转为水平
            plane.position.x = 15;//位置
            plane.position.y = 0;
            plane.position.z = 0;
            scene.add(plane);
            //长方体
            var cubeGeometry = new THREE.CubeGeometry(4,4,4);
            var cubeMaterial = new THREE.MeshBasicMaterial({color:0xff0000,wireframe:true});//wireframe为true，显示线框图
            var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
            cube.position.y = -4;
            cube.position.y = 3;
            cube.position.z = 0;
            scene.add(cube);
            //球
            var sphereGeometry = new THREE.SphereGeometry(4,20,20);
            var sphereMaterial = new THREE.MeshBasicMaterial({color:0x7777ff,wireframe:true});
            var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
            sphere.position.x = 20;
            sphere.position.y = 4;
            sphere.position.z = 2;
            scene.add(sphere);
            //相机位置：又称为视角位置
            camera.position.x = -30;
            camera.position.y = 40;
            camera.position.z = 30;
            camera.lookAt(scene.position);//指定场景的中心
            //将渲染器(renderer)输出挂接到HTML中
            $("#WebGL-output").append(renderer.domElement);
            //告诉渲染器(renderer)用我们提供的相机(camera)来渲染场景(scene)
            renderer.render(scene,camera);
        });
    </script>
</body>
</html>